<template>
	<!-- <view class="index-container">
		<view class="banner">
			<image src="../../static/icon/banner.png" mode=""></image>
		</view>
		<view class="nav">
			<view class="nav-item" v-for="(item, index) in ticketNavList" :key="index" @click="goTicket(item.path)">
				<view class="item-img">
					<image :src="item.src" mode=""></image>
				</view>
				<text>{{item.title}}</text>
			</view>
		</view>
	</view> -->
	 <page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<view style="padding:32rpx 26rpx;color: #333;font-size: 32rpx;">
		<view style="margin-bottom: 60rpx;">
			<view class="party-main-title">
				一键申报
			</view>

			<view
				style="display: grid;grid-template-columns: auto auto auto;grid-gap: 50rpx;text-align: center;padding: 30rpx;">
				<navigator :url="item.path" v-for="(item,index) in list1" :key="index">
					<image :src="item.src" style="width:84rpx;height: 84rpx ;"></image>
					<view>{{item.title}}</view>
				</navigator>
			</view>
		</view>
		<view style="margin-bottom: 60rpx;">
			<view class="party-main-title">
				过程纪实
			</view>
			<view
				style="display: grid;grid-template-columns: auto auto auto;grid-gap: 50rpx;text-align: center;padding: 30rpx;">
				<navigator :url="item.path" v-for="(item,index) in list2" :key="index">
					<image :src="item.src" style="width:84rpx;height: 84rpx ;"></image>
					<view>{{item.title}}</view>
				</navigator>
			</view>
		</view>
		<view style="margin-bottom: 60rpx;">
			<view class="party-main-title">
				评价预警
			</view>
			<view
				style="display: grid;grid-template-columns: auto auto auto;grid-gap: 50rpx;text-align: center;padding: 30rpx;">
				<navigator :url="item.path" v-for="(item,index) in list3" :key="index">
					<image :src="item.src" style="width:84rpx;height: 84rpx ;"></image>
					<view>{{item.title}}</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState(['fontSize'])
		},
		data() {
			return {
				list1: [{
						src: '../static/img/guzhangbaoxiu.png',
						title: '故障报修',
						path: '/ticketSystem/repair/repair'
					},
					{
						src: '../static/img/baojieqingli.png',
						title: '保洁清理',
						path: '/ticketSystem/clean/clean'
					},
					{
						src: '../static/img/xiaofanganquan.png',
						title: '消防安全',
						path: '/ticketSystem/firecontrol/firecontrol'
					},
					{
						src: '../static/img/lvzhiyanghu.png',
						title: '绿植养护',
						path: '/ticketSystem/greenPlant/greenPlant'
					},
					{
						src: '../static/img/shebeianzhuang.png',
						title: '设备安装',
						path: '/ticketSystem/equipment/equipment'
					},
					{
						src: '../../static/icon/jl.png',
						title: '意见投诉',
						path: '/ticketSystem/feedback/feedback'
					},
					{
						src: '../../static/icon/kr.png',
						title: '装修申请',
						path: '/ticketSystem/renovation/renovation'
					},
					{
						src: '../../static/icon/txl.png',
						title: '装修验收',
						path: '/ticketSystem/acceptCheck/acceptCheck'
					},
					{
						src: '../static/img/chakangengduo.png',
						title: '查看更多',
						path: ''
					}
				],

				list2: [{
						src: '../static/img/wuyejiejue.png',
						title: '物业解决',
						path: '/ticketSystem/wuyejiejue/wuyejiejue'
					}, {
						src: '../static/img/dangxiaozujiejue.png',
						title: '党小组解决',
						path: '/ticketSystem/dangxiaozujiejue/dangxiaozujiejue'
					},
					{
						src: '../static/img/dangzhibujiejue.png',
						title: '党支部解决',
						path: '/ticketSystem/dangzhibujiejue/dangzhibujiejue'
					}
				],
				list3: [{
						src: '../static/img/chengxiaopingjia.png',
						title: '成效评价',
						path: '/ticketSystem/chengxiaopingjia/chengxiaopingjia'
					}, {
						src: '../static/img/yujingtishi.png',
						title: '预警提示',
						path: '/ticketSystem/yujingtishi/yujingtishi'
					},
					{
						src: '../static/img/yijiantousu.png',
						title: '意见投诉',
						path: '/ticketSystem/feedback/feedback'
					}
				],
				ticketNavList: [{
						src: '../../static/icon/wx.png',
						title: '故障报修',
						path: '/ticketSystem/repair/repair'
					},
					// {
					// 	src: '../../static/icon/ll.png',
					// 	title: '上门回收',
					// 	path: '/ticketSystem/appointment/appointment'
					// },
					{
						src: '../../static/icon/kq.png',
						title: '设备安装',
						path: '/ticketSystem/equipment/equipment'
					}, {
						src: '../../static/icon/cx.png',
						title: '保洁清理',
						path: '/ticketSystem/clean/clean'
					},
					{
						src: '../../static/icon/by.png',
						title: '绿植养护',
						path: '/ticketSystem/greenPlant/greenPlant'
					},
					{
						src: '../../static/icon/zj.png',
						title: '消防安全',
						path: '/ticketSystem/firecontrol/firecontrol'
					}, {
						src: '../../static/icon/jl.png',
						title: '意见投诉',
						path: '/ticketSystem/feedback/feedback'
					},
					{
						src: '../../static/icon/kr.png',
						title: '装修申请',
						path: '/ticketSystem/renovation/renovation'
					},
					{
						src: '../../static/icon/txl.png',
						title: '装修验收',
						path: '/ticketSystem/acceptCheck/acceptCheck'
					}
				]
			}
		},
		created() {
			// uni.showTabBar()
		},
		methods: {
			goTicket(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.party-main-title {
		font-size: 32rpx;
		color: #333333;
		font-family: Source Han Sans CN;
		font-weight: bold;
		display: flex;
		align-items: center;

	}

	.party-main-title::before {
		content: "";
		display: inline-block;
		width: 18rpx;
		height: 30rpx;
		background: #4874FF;
		border-radius: 10rpx;
		margin-right: 16rpx;
	}

	// 	.index-container {
	// 		background-color: #F5f5f5;
	// 		height: 100vh;
	// 		.banner {
	// 			width: 750rpx;
	// 			height: 360rpx;
	// 			image {
	// 				width: 100%;
	// 				height: 100%;
	// 			}
	// 		}
	// 		.nav {
	// 			position: relative;
	// 			left: 20rpx;
	// 			top: -50rpx;
	// 			width: 706rpx;
	// 			height: 790rpx;
	// 			background: #F7F7F7;
	// 			box-shadow: 0px 2rpx 16rpx 0px #E0E6EF;
	// 			border-radius: 12rpx;
	// 			display: flex;
	// 			flex-wrap: wrap;
	// 			.nav-item {
	// 				width: 234rpx;
	// 				height: 234rpx;
	// 				text-align: center;
	// 				overflow: hidden;
	// 				.item-img {
	// 					width: 68rpx;
	// 					height: 68rpx;
	// 					margin: 55rpx 86rpx 23rpx 80rpx;
	// 					image {
	// 						width: 100%;
	// 						height: 100%;
	// 					}
	// 				}
	// 			}
	// 		}
	// }
</style>
